<template>
  <div class="cell" id="cell" align="center">
    <div v-if="item.datatype == '-1'">{{ row["ErrorMsg"] }}</div>
    <!-- input -->
    <el-input :disabled="disabled" v-if="item.datatype == '1' || item.datatype == '2'" v-model="row[item.columnid]" :maxlength="item.maxLength" type="text"></el-input>
    <!-- radio -->
    <el-radio-group v-if="item.datatype == '3'" v-model="row[item.columnid]" :disabled="disabled">
      <el-radio v-for="i in item.options" :label="i.optionvalue + ''" :key="i.optionvalue + ''">{{ i.optiondisplay }}</el-radio>
    </el-radio-group>
    <!-- checkbox -->
    <el-checkbox-group v-if="item.datatype == '4'" v-model="row[item.columnid]" :disabled="disabled">
      <el-checkbox v-for="i in item.options" :label="i.optionvalue + ''" :key="i.optionvalue + ''">{{ i.optiondisplay }}</el-checkbox>
    </el-checkbox-group>
    <!-- select -->
    <el-select v-if="item.datatype == '5'" v-model="row[item.columnid]" placeholder="请选择" :disabled="disabled">
      <el-option v-for="option in item.options" :key="option.optionvalue" :label="option.optiondisplay" :value="option.optionvalue + ''"></el-option>
    </el-select>
    <!-- cascader 地址 -->
    <!-- <el-cascader popper-class="max300" :props="defaultProps1" :options="cityList" v-model="row[item.columnid]" clearable :disabled="disabled"></el-cascader> -->
    <!-- <el-input v-model="item.fieldItems[0].value" :maxlength="item.fieldItems[0].maxLength" type="text"></el-input> -->
    <el-select v-if="item.datatype == '6'" v-model="row[item.columnid]" placeholder="请选择" :disabled="disabled" @change="reSetValue">
      <el-option v-for="option in getCityOption" :key="option.key" :label="option.value" :value="option.key + ''"></el-option>
    </el-select>
    <!-- 部门 -->
    <!-- <el-cascader :disabled="disabled" v-if="item.datatype == '7'" :options="companySection" :props="defaultProps" v-model="row[item.columnid]" placeholder="部门" clearable></el-cascader> -->
    <el-select v-if="item.datatype == '7'" v-model="row[item.columnid]" placeholder="请选择" :disabled="disabled">
      <el-option v-for="option in subcompanyDepOptions" :key="option.key" :label="option.value" :value="option.key + ''"></el-option>
    </el-select>
    <!-- picker -->
    <el-date-picker :disabled="disabled" align="center" v-if="item.datatype == '8'" v-model="row[item.columnid]" type="date" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
    <!-- 公司 -->
    <el-select :disabled="disabled" v-if="item.datatype == '10'" v-model="row[item.columnid]" placeholder="请选择">
      <el-option v-for="option in companySection" :key="option.id" :label="option.name" :value="option.id + ''"></el-option>
    </el-select>
    <!--  银行 -->
    <span v-if="item.datatype == '14' && item.fieldItems">
      <el-select
        :disabled="disabled"
        v-model="row[item.columnid]"
        :ref="'Back' + index"
        filterable
        default-first-option
        :filter-method="
          (val) => {
            tailoringFilter(YeepayBank, { key1: 'key', key2: 'value' }, val, 'BankList', 'Back' + index);
          }
        "
        @blur="initTailoringData(YeepayBank, item.value, 'value', 'BankList', 'isBlur')"
        placeholder="请选择"
      >
        <el-option v-for="option in BankList" :key="option.key" :label="option.value" :value="option.key"></el-option>
      </el-select>
      <el-input v-model="row[item.columnid]" :maxlength="item.fieldItems[0].maxLength" type="text" :disabled="disabled"></el-input>
    </span>
  </div>
</template>
<script>
import { boolean } from "mathjs";
import { mapState } from "vuex";
export default {
  data() {
    return {
      row: {},
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
      },
    };
  },
  props: {
    item: {},
    tempRow: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    subcompanyDepOptions: [],
  },
  computed: {
    ...mapState({
      YeepayBank: (state) => state.personnel.YeepayBank,
      companySection: (state) => state.common.companySection,
      cityList: (state) => state.common.provinceCityList,
      Company: (state) => state.personnel.CompanyList,
    }),
    getCityOption() {
      //省市县
      let cityOptions = [];
      if (this.item.columnid.indexOf("province") > -1) {
        this.cityList.forEach((element) => {
          cityOptions.push({
            key: element.proID,
            value: element.name,
          });
        });
      } else if (this.item.columnid.indexOf("city") > -1) {
        let columnid = this.item.columnid.replace("_city", "");
        let province = this.row[`${columnid}_province`];
        let citys = this.cityList.find((m) => m.proID == province).children;
        citys.forEach((m) => {
          cityOptions.push({
            key: m.cityID,
            value: m.name,
          });
        });
      } else if (this.item.columnid.indexOf("county") > -1) {
        let columnid = this.item.columnid.replace("_county", "");
        let province = this.row[`${columnid}_province`];
        let city = this.row[`${columnid}_city`];
        let citys = this.cityList.find((m) => m.proID == province).children;
        let countys = citys.find((m) => m.cityID == city).children;
        countys.forEach((m) => {
          cityOptions.push({
            key: m.id,
            value: m.name,
          });
        });
      }
      return cityOptions;
    },
  },
  created() {
    this.row = this.tempRow;
  },
  methods: {
    reSetValue(e) {
      if (this.item.columnid.indexOf("province") > -1) {
        let columnid = this.item.columnid.replace("_province", "");
        this.row[`${columnid}_city`] = "";
        this.row[`${columnid}_county`] = "";
      } else if (this.item.columnid.indexOf("city") > -1) {
        let columnid = this.item.columnid.replace("_city", "");
        this.row[`${columnid}_county`] = "";
      }
    },
  },
};
</script>
<style lang="less">
.element {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
#cell {
  height: 100%;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}
</style>
